<!-- 我的订单 会员订单组件 -->
<template>
  <view class="item-card">
    <view class="flex flex-col justify-between">
      <view class="flex items-center">
        <image class="w-60 h-42" src="/static/images/user/ic_order_vip.png"></image>
        <view class="ml-2 c-#333 text-28 font-bold">开通会员</view>
      </view>
      <view>
        <view class="mb-1 c-#666 text-28 font-bold">开通{{ data.vip_name || '会员' }}</view>
        <view class="c-#999 text-24">{{ dateFormat(data.pay_time, 'YYYY-MM-DD HH:mm') }}</view>
      </view>
    </view>
    <view class="flex flex-col justify-between items-end">
      <view class="c-#666 text-24">{{ data.order_sn }}</view>
      <view class="c-#FF513A text-32 font-bold">¥{{ Number(data.order_amount || 0).toFixed(2) }}</view>
    </view>
  </view>
</template>

<script setup>
import { dateFormat } from '@/common/util/date'

defineProps({
  data: Object
})
</script>

<style lang='scss' scoped>
.item-card {
  display: flex;
  min-height: 200rpx;
  justify-content: space-between;
  padding: 24rpx 28rpx;
  margin-bottom: 24rpx;
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}
</style>
